<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PropertyGrid</title>
    <link href="/themes/icon.css" rel="stylesheet" type="text/css" >
    <link href="/themes/default/easyui.css" rel="stylesheet" type="text/css" >
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.easyui.min.js"></script>
    <script src="/js/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <table id="pg" style="width: 300px;">
    </table>
    <script>
        let data={
            "total":7,
            "rows":[
                {"name":"姓名","value":"张三","group":"基本信息","editor":"text"},
                {"name":"性别","value":"男","group":"基本信息","editor":"text"},
                {"name":"籍贯","value":"北京","group":"基本信息","editor":"text"},
                {"name":"小学","value":"xx实验小学","group":"教育信息","editor":"text"},
                {"name":"中学","value":"xx第一中学","group":"教育信息","editor":"text"},
                {"name":"大学","value":"xx师范大学","group":"教育信息","editor":"text"},
                {"name":"工作经验","value":"。。。。","group":"工作经验","editor":"text"},
            ]
        };

        $(function(){
            $('#pg').propertygrid({
                data:data, //指定数据
                showGroup:true,//显示分组
                scrollbarSize:0,
                columns:[[
                    {"field":"name","title":"MyName"},
                    {"field":"value","title":"MyValue"},
                ]],
                groupFormatter:function(value,rows){
                    return value +" <span style='color:red'>"+rows.length+"行</span>";
                }
            });
        });

    </script>
</body>
</html>